<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
	<title>首页</title>
	<script type="text/javascript" src="https://www.zengpengxi.com/js/jquery-3.5.1.js"></script>
	<script type="text/javascript" src="https://www.zengpengxi.com/js/vue.js"></script>
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
	<!-- 站位 -->
	<div class="zw"></div>			

	<!-- 导航栏 -->
	<header>
		<img src="https://showtp.oss-cn-chengdu.aliyuncs.com/books/images/logo.png" />
		<nav id="nav">
			<a href="html/content.html">— Kindle区 —</a>
			<a href="#">— PDF区 —</a>
			<a href="#">— 计算机区 —</a>
			<a href="html/stackRoom.html">— 书库 —</a>
			<a href="#" id="navA">— 登录 —</a>
		</nav>
	</header>
	
	<!-- 模态框及登录界面 -->
	<div id="backGr"></div>
	<div id="login">

		<!-- 登录 -->
		<span style="cursor:pointer;" id="close">&times;</span>
     	<form action="#" id="firstForm">
			<fieldset>
				<legend>登录</legend>
				<div><i>User</i><span id="oneDlSpan"></span><br/><input type="text"  size="30" id="user"><br></div>
				<div><i>Password</i><span id="twoDlSpan"></span><br/><input type="password" size="30" id="dlPassword"></div>
				<div class="theradio"><input type="checkbox" id="radio" style="height:10px"><label for="radio">同意《使用条款》</label></div>
				<div class="zc">
					<input type="submit" value="登录">
					<input type="button" value="注册" id="doZc">
				</div>
			</fieldset>
        </form>
        <div class="theText">
        	<p><i>Welcome</i></p>
        </div>

		<!-- 注册 -->
        <form action="#" id="secondForm">
			<fieldset>
				<legend>注册</legend>
				<div class="zcUser">
					<div><i>First Name</i><span id="oneZcSpan"></span><br/><input type="text"  size="11" id="firstName"></div>
					<div><i>Last Name</i><span id="twoZcSpan"></span><br/><input type="text"  size="11" id="lastName"></div>
				</div>
				<div><i>E-mail</i><span id="fourZcSpan"></span><br/><input type="email" size="30" id="zcEmail"></div>
				<div><i>Password</i><span id="fiveZcSpan"></span><br/><input type="password" size="30" id="zcPassword"></div>
				<div><i>Phone Number</i><span id="sixZcSpan"></span><br/><input type="text" size="30" id="zcNumber"></div>
				<div class="theradio"><input type="checkbox" id="radio" style="height:10px"><label for="radio">同意《使用条款》</label></div>
				<div class="zc">
					<input type="button" value="返回" id="returnLogin">
					<input type="submit" value="提交">
				</div>
			</fieldset>
        </form>
    </div>

	<!-- 轮播图 -->
	<section class="theSj">
		
		<!-- 按键 -->
		<div class="numbers">
			<ul id="theUl">
				<li class="theLi"></li>
				<li class="theLi"></li>
				<li class="theLi"></li>
				<li class="theLi"></li>
				<li class="theLi"></li>
			</ul>
		</div>

		<!-- 轮播图片 -->
		<img src="https://showtp.oss-cn-chengdu.aliyuncs.com/books/images/oneNav.jpg" >
		<img src="https://showtp.oss-cn-chengdu.aliyuncs.com/books/images/twoNav.jpg" >
		<img src="https://showtp.oss-cn-chengdu.aliyuncs.com/books/images/threeNav.jpg" >
		<img src="https://showtp.oss-cn-chengdu.aliyuncs.com/books/images/fourNav.jpg" >
		<img src="https://showtp.oss-cn-chengdu.aliyuncs.com/books/images/fiveNav.jpg" >

		<!-- 更变显示区域 -->
		<div class="theSjLeft"></div>
		<div class="theSjRight"></div>

		<div id="leftText" class="leftText">
			<p>妙趣横生的宇宙，重归于简洁与诗意 予写给看不懂《时间简史》的你</p>
		</div>
		<div id="rightText" class="rightText">
			<a href="https://showtp.oss-cn-chengdu.aliyuncs.com/books/kindle/%E6%9E%81%E7%AE%80%E5%AE%87%E5%AE%99%E5%8F%B2.mobi" id="theHref">
				<img src="https://showtp.oss-cn-chengdu.aliyuncs.com/books/Kindleimgs/%E6%9E%81%E7%AE%80%E5%AE%87%E5%AE%99%E5%8F%B2.jpg" >
			</a>
		</div>

	</section>
	
	<!-- 下方盒子 -->
	<section class="theSpan" id="thisDivs" >
		<span id="oneSpan"></span>
		<div class="boxStyle" id="oneDiv">
			<div class="boxStyleLeft" v-on:click="aler">
				<img :src="divImgs[0]" >
			</div>
			<div class="boxStyleRight" id="scetionss">
				<h2>— 科学 —</h2>
			</div>
		</div>
		<span id="twoSpan"></span>
		<div class="boxStyle" id="twoDiv">
			<div class="boxStyleRight" id="history">
				<h2>— 历史 —</h2>
			</div>
			<div class="boxStyleLeft">
				<img :src="divImgs[1]">
			</div>
		</div>
		<span id="threeSpan"></span>
		<div class="boxStyle" id="threeDiv">
			<div class="boxStyleLeft">
				<img :src="divImgs[2]" >
			</div>
			<div class="boxStyleRight" id="masterwork">
				<h2>— 著作 —</h2>
			</div>
		</div>
		<span id="fourSpan"></span>
		<div class="boxStyle" id="fourDiv">
			<div class="boxStyleRight" id="philosophy">
				<h2>— 哲学 —</h2>
			</div>
			<div class="boxStyleLeft">
				<img :src="divImgs[3]" >
			</div>
		</div>
	</section>
	
	<!-- 底部 -->
	<footer>
		<div class="footerTop">
			<div class="">
				<a href="#">首页</a>
				<a href="">书库</a>
			</div>
			<div class="">
				<a href="#">更多</a>
				<a href="#">往期页面</a>
			</div>
		</div>
		<div class="footerBottom">
			<p>联系我们：</p>
			<p>QQ：2638000000</p>
			<p>电话：19900000000，010 - 0000000</p>
			<p>蜀ICP备19038726号</p>
		</div>
	</footer>
	
	<script src="js/index.js"></script>
</body>
</html>